import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import styled from '@emotion/styled';
import { Jumbotron } from 'react-bootstrap';

import { IPhone6Plus } from 'react-device-mockups';
import 'html5-device-mockups/dist/device-mockups.min.css';
import './Home.css';

const Banner = ({ style }) => (
  <Jumbotron style={style}>
    <h3>可回溯操作</h3>
    <p>
      前端采用
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="https://github.com/rrweb-io/rrweb"
      >
        rrweb
      </a>
      进行录制，并将动作发送至服务器端存档，生成视频
    </p>
    <p>请选择产品开始录屏操作</p>
  </Jumbotron>
);

const Wrapper = styled.div`
  display: flex;
  flex-direction: row;
`;

const Home = () => {
  const [session, setSession] = useState('');

  useEffect(() => {
    const handler = (message = {}) => {
      const { data = {} } = message;
      const { session } = data;

      if (session) {
        setSession(session);
      }
    };
    window.addEventListener('message', handler, false);

    return () => window.removeEventListener('message', handler);
  }, [setSession]);

  return (
    <Wrapper>
      <div style={{ width: 440, padding: '1rem', margin: 0 }}>
        <IPhone6Plus height={800} color="black">
          <iframe
            title="showcase"
            src="/products"
            style={{
              width: '100%',
              height: '100%',
              margin: 0
            }}
          />
        </IPhone6Plus>
      </div>
      <div style={{ padding: '0 1rem', flex: 9 }}>
        <Banner style={{ marginTop: '1rem' }} />
        <ul>
          <li>
            <Link to="/tracks">查看历史回放</Link>
          </li>
        </ul>
      </div>

      <div style={{ width: 440, padding: '1rem', margin: 0 }}>
        <IPhone6Plus height={800} color="black">
          <iframe
            title="showcase"
            src={session ? `/tracks/${session}` : 'about:blank'}
            style={{
              width: '100%',
              height: '100%',
              margin: 0
            }}
          />
        </IPhone6Plus>
      </div>
    </Wrapper>
  );
};

export default Home;
